<template>
	<view class="staff">
		<view class="itemBox" v-if="StaffList.length > 0">
			<view class="item" v-for="(item, index) in StaffList" :key="index">
				<image :src="item.portrait == null || item.portrait == '' ? '/static/images/head.png' : `${carHost}${item.portrait}`" mode="aspectFill"></image>
				<view class="staffinfo">
					<view class="name">{{ item.name }}</view>
					<view class="text">账号：{{ item.phone }}</view>
					<view class="text">职位：{{ item.position }}</view>
				</view>
				<view class="control">
					<view class="text">状态: <text class="control__status">{{ item.status == 0 ? '禁用' : '启用' }}</text></view>
					<view class="buttonBox">
						<text class="iconfontPT iconzaixianjianli" @click="edit(item)"></text>
						<text class="iconfontPT iconshanchu11" @click="del(item)"></text>
					</view>
				</view>
			</view>
		</view>
		<view v-else><noData texts="您还未添加任何员工"></noData></view>
		<view class="creat_btn" @click="gotoadd"><text>添加员工</text></view>
	</view>
</template>

<script>
import { getStaffList, delStaff } from '../../apis/shop/api.js';
import noData from '../components/public/no-data.vue';
export default {
	data() {
		return {
			StaffList: []
		};
	},
	onLoad() {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getlist();
	},
	onShow(e) {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; //当前页面
		let that = this;
		if (currPage.data.isDoRefesh) {
			currPage.data.isDoRefesh = false;
			that.getlist();
		}
	},
	computed:{
		carHost(){
			return this.$baseHost.car
		}
	},
	methods: {
		gotoadd() {
			uni.navigateTo({
				url: '/pages/shopmanager/addStaff'
			});
		},
		edit(item) {
			uni.navigateTo({
				url: '/pages/shopmanager/addStaff?id=' + item.id
			});
		},
		getlist() {
			let that = this;
			getStaffList({
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					const staffList = res.data.staff;

					that.StaffList = staffList;
				} else {
					uni.showToast({
						title: res.msg
					});
				}
			});
		},
		del(item) {
			let that = this;
			delStaff({
				id: item.id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '删除成功'
					});
					that.getlist();
				} else {
					uni.showToast({
						title: res.msg
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f8f8f8;
}

.staff {
	padding-bottom: 110rpx;
	
	.itemBox {
		padding: 30rpx;

		.item {
			padding: 30rpx;
			height: 176rpx;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			margin-bottom: 25rpx;
			box-shadow: 0rpx 3rpx 22rpx 5rpx rgba(153, 153, 153, 0.1);

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.staffinfo {
				float: left;
				flex: 1;
				margin-left: 30rpx;

				.name {
					font-size: 34rpx;
					color: #333333;
					font-weight: bold;
					margin-bottom: 12rpx;
				}

				.text {
					font-size: 24rpx;
					color: #666;
					line-height: 48rpx;
				}
			}

			.control {
				width: 122rpx;
				position: relative;
				display: flex;
				flex-flow: row wrap;
				align-content: space-between;
				height: 80%;
				
				&__status {
					margin-left: 20rpx;
				}


				.text {
					font-size: 24rpx;
					color: #666;
				}

				.buttonBox {
					width: 100%;
					display: flex;
					justify-content: space-between;

					text {
						font-size: 30rpx;
						color: #333;

						&:nth-child(2) {
							font-size: 34rpx;
						}
					}
				}
			}
		}
	}
}
</style>
